<template>
    <div class="profile" name="profile">
        <van-nav-bar title="个人中心" left-text="返回" left-arrow @click-left="onClickLeft" />

        <!-- 登录状态 -->
        <template v-if="isLoggedIn">
            <!-- 个人信息卡片 -->
            <div class="user-card">
                <div class="avatar-container" @click="goToProfileInfo">
                    <img :src="userInfo.avatar" class="avatar" />
                    <van-icon name="edit" class="edit-icon" />
                </div>
                <div class="user-info">
                    <div class="username">{{ userInfo.nickname || userInfo.username }}</div>
                    <div class="user-id">ID: {{ userInfo.userId }}</div>
                    <div class="signature">{{ userInfo.signature || '这个人很懒，什么都没留下' }}</div>
                </div>
            </div>

            <!-- 功能菜单列表 -->
            <van-cell-group inset class="menu-group">
                <van-cell title="个人资料" is-link to="/profile/info" />
                <van-cell title="账号安全" is-link to="/profile/security" />
                <van-cell title="支付管理" is-link to="/profile/payment" />
                <van-cell title="收藏夹" is-link to="/favor" />
                <van-cell title="我的订单" is-link to="/order" />
            </van-cell-group>

            <van-cell-group inset class="menu-group">
                <van-cell title="设置" is-link />
                <van-cell title="帮助与反馈" is-link />
                <van-cell title="关于我们" is-link />
                <van-cell title="退出登录" is-link @click="handleLogout" />
            </van-cell-group>

            <!-- 退出登录弹出框 -->
            <van-popup v-model:show="show" round position="center" class="logout-popup">
                <div class="logout-content">
                    <div class="logout-title">退出登录</div>
                    <div class="logout-message">确定要退出登录吗？</div>
                    <div class="logout-buttons">
                        <van-button round block class="cancel-btn" @click="show = false">
                            取消
                        </van-button>
                        <van-button round block type="primary" color="#ff9854" class="confirm-btn"
                            @click="confirmLogout">
                            确认退出
                        </van-button>
                    </div>
                </div>
            </van-popup>
        </template>

        <!-- 未登录状态 -->
        <template v-else>
            <div class="not-login-container">
                <van-empty image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"
                    description="您尚未登录">
                    <van-button round type="primary" size="small" @click="goToLogin" class="login-btn">
                        去登录
                    </van-button>
                </van-empty>

                <!-- 通用功能菜单 -->
                <!-- <van-cell-group inset class="menu-group">
                    <van-cell title="设置" is-link />
                    <van-cell title="帮助与反馈" is-link />
                    <van-cell title="关于我们" is-link />
                </van-cell-group> -->
            </div>
        </template>
    </div>
</template>

<script>
export default {
    name: "profile"
}
</script>

<script setup>
import { computed, ref } from 'vue'
import { useRouter } from 'vue-router'
import { showSuccessToast } from 'vant'
import useUserStore from '@/stores/modules/user'

const router = useRouter()
const userStore = useUserStore()
const userInfo = computed(() => userStore.userInfo)
const isLoggedIn = computed(() => userStore.isLoggedIn())
const show = ref(false)

// 返回按钮点击
const onClickLeft = () => {
    router.back()
}

// 前往个人资料页
const goToProfileInfo = () => {
    router.push('/profile/info')
}

// 前往登录页面
const goToLogin = () => {
    router.push({
        path: '/login',
        query: { redirect: '/profile' }
    })
}

// 打开退出登录弹窗
const handleLogout = () => {
    show.value = true
}

// 确认退出登录
const confirmLogout = () => {
    // 关闭弹窗
    show.value = false
    // 执行退出登录
    userStore.logout()
    showSuccessToast('已退出登录')
    // 跳转到首页
    router.replace('/home')
}
</script>

<style lang="less" scoped>
.profile {
    background-color: #f7f8fa;
    min-height: 100vh;
}

.user-card {
    display: flex;
    align-items: center;
    padding: 24px 16px;
    background-color: #fff;
}

.avatar-container {
    position: relative;
    margin-right: 16px;
}

.avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
}

.edit-icon {
    position: absolute;
    right: 0;
    bottom: 0;
    background-color: #ff9854;
    color: white;
    border-radius: 50%;
    padding: 4px;
    font-size: 16px;
}

.user-info {
    flex: 1;
}

.username {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 4px;
}

.user-id {
    font-size: 12px;
    color: #999;
    margin-bottom: 8px;
}

.signature {
    font-size: 14px;
    color: #666;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.menu-group {
    margin-top: 12px;
}

.not-login-container {
    padding: 40px 0;
}

.login-btn {
    margin-top: 20px;
    width: 120px;
    background-color: #ff9854;
    border: none;
}

/* 退出登录弹窗样式 */
.logout-popup {
    width: 80%;
    max-width: 320px;
}

.logout-content {
    padding: 24px 16px;
}

.logout-title {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    text-align: center;
    margin-bottom: 16px;
}

.logout-message {
    font-size: 16px;
    color: #666;
    text-align: center;
    margin-bottom: 24px;
    line-height: 1.5;
}

.logout-buttons {
    display: flex;
    gap: 12px;
}

.cancel-btn {
    flex: 1;
    height: 40px;
    font-size: 16px;
    border: 1px solid #dcdee0;
    color: #666;
}

.confirm-btn {
    flex: 1;
    height: 40px;
    font-size: 16px;
}
</style>